<template>
  <div class="container">
    <div class="header flex-yc flex-xbt">
      <h2>模板列表</h2>
      <el-button type="primary" :icon="Plus" @click="onAddTemplate()">
        新增模板
      </el-button>
    </div>
    <table-comp :column="column" index :list="dataBaseTemplates">
      <template v-slot:handleSlot="{ row }">
        <el-button size="small" type="success" @click="onAddTemplate(row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="onDelTask(row.id)">
          删除
        </el-button>
      </template>
    </table-comp>

    <dialog-comp
      v-model="isAddDataBase"
      :title="'新增数据库模板'"
      width="500"
      @onSubmit="onAddTemplateSubmit"
      @onClose="onCloseTemplate"
    >
      <add-template ref="addForm" v-bind="dataBaseTemplateData"></add-template>
    </dialog-comp>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import TableComp from '@/components/table/index.vue'
import DialogComp from '@/components/dialog/index.vue'
import AddTemplate from '../components/addData.vue'
import {
  reqDeleteDataBaseTemplate,
  reqGetDataBaseCategory,
  reqGetDataBaseTemplate,
} from '@/api/database.ts'
import { onMounted, ref } from 'vue'
import {
  reqDataBaseTemplateBody,
  respDataBaseTemplate,
} from '@/api/types/database'
import { reactive } from 'vue'
import { tableColumn } from '@/components/table/column'
import { MsgError, MsgSuccess } from '@/utils/utils.ts'
import { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => getDataBaseTemplate())

const column = reactive<tableColumn[]>([
  { label: '模板名称', prop: 'templateName' },
  { label: '所属数据库', prop: 'databaseCategoryName' },
  // { label: '创建时间', prop: 'createTime' },
  { label: '操作', prop: '', type: 'slot', slotName: 'handleSlot' },
])

const dataBaseTemplates = ref<respDataBaseTemplate[]>([])
const getDataBaseTemplate = async () => {
  const { data } = await reqGetDataBaseTemplate()
  dataBaseTemplates.value = data
  if (data.length > 0) {
    dataBaseTemplates.value.map(async (item) => {
      const { data } = await reqGetDataBaseCategory({
        id: item.templateCategory,
      })
      item.databaseCategoryName = data[0]?.databaseCategoryName || ''
    })
  }
}

const onDelTask = async (id: string) => {
  const { code, msg } = await reqDeleteDataBaseTemplate(id)
  code === 0 && MsgSuccess(msg || '删除成功')
  code !== 0 && MsgError(msg || '删除失败')
}

const isAddDataBase = ref(false)
const dataBaseTemplateData = ref<Partial<respDataBaseTemplate>>({})
const onAddTemplate = (dataBaseTemplate?: respDataBaseTemplate) => {
  isAddDataBase.value = true
  dataBaseTemplateData.value = dataBaseTemplate || {}
}
const onCloseTemplate = () => {
  isAddDataBase.value = false
  dataBaseTemplateData.value = {}
}
const addForm = ref<FormInstance>()
const onAddTemplateSubmit = async () => {
  const formData: Partial<reqDataBaseTemplateBody> = addForm.value!.formData
  if (dataBaseTemplateData.value.id) formData.id = dataBaseTemplateData.value.id
  router.push({ path: '/database/template/design', query: { ...formData } })
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding: 20px 16px;
  .header {
    padding-bottom: 15px;
  }
}
</style>
